<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="heweiliang blog">
<meta property="og:type" content="website">
<meta property="og:title" content="heweiliang blog">
<meta property="og:url" content="http://yoursite.com/page/3/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="heweiliang blog">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="heweiliang">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/page/3/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>

  <title>heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content index posts-expand">
            
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/JavaScript/Xpath%E6%95%99%E7%A8%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/JavaScript/Xpath%E6%95%99%E7%A8%8B/" class="post-title-link" itemprop="url">前端/JavaScript/Xpath教程</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:43:39" itemprop="dateModified" datetime="2020-06-26T15:43:39+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>789</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="Xpath教程（2020-2-28）"><a href="#Xpath教程（2020-2-28）" class="headerlink" title="Xpath教程（2020.2.28）"></a>Xpath教程（2020.2.28）</h2><p><a href="https://www.w3school.com.cn/xpath/xpath_operators.asp" target="_blank" rel="noopener">https://www.w3school.com.cn/xpath/xpath_operators.asp</a></p>
<p><a href="https://blog.csdn.net/zgkli6com/article/details/17491479" target="_blank" rel="noopener">https://blog.csdn.net/zgkli6com/article/details/17491479</a></p>
<p><a href="https://www.jianshu.com/p/d713b584ee42" target="_blank" rel="noopener">https://www.jianshu.com/p/d713b584ee42</a></p>
<p><a href="https://www.jianshu.com/p/2391950137a4" target="_blank" rel="noopener">https://www.jianshu.com/p/2391950137a4</a></p>
<h3 id="XPath-教程"><a href="#XPath-教程" class="headerlink" title="XPath 教程"></a>XPath 教程</h3><h3 id="XPath-简介"><a href="#XPath-简介" class="headerlink" title="XPath 简介"></a>XPath 简介</h3><h6 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h6><ul>
<li>XPath是一门<strong>在XML文档中查找信息的语言</strong>。</li>
<li>XPath可用<strong>在XML文档对元素和属性进行遍历</strong>。</li>
<li>XPath 用于<strong>在 XML 文档中通过元素和属性进行导航。</strong></li>
</ul>
<h6 id="什么是-XPath"><a href="#什么是-XPath" class="headerlink" title="什么是 XPath?"></a>什么是 XPath?</h6><ul>
<li>XPath 使用路径表达式在 XML 文档中进行导航</li>
<li>XPath 包含一个标准函数库</li>
<li>XPath 是 XSLT 中的主要元素</li>
<li>XPath 是一个 W3C 标准</li>
</ul>
<h6 id="XPath-路径表达式"><a href="#XPath-路径表达式" class="headerlink" title="XPath 路径表达式"></a>XPath 路径表达式</h6><p>XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。</p>
<h6 id="XPath-标准函数"><a href="#XPath-标准函数" class="headerlink" title="XPath 标准函数"></a>XPath 标准函数</h6><p>XPath 含有超过 100 个内建的函数。这些函数用于字符串值、数值、日期和时间比较、节点和 QName 处理、序列处理、逻辑值等等。</p>
<h6 id="XPath-在-XSLT-中使用"><a href="#XPath-在-XSLT-中使用" class="headerlink" title="XPath 在 XSLT 中使用"></a>XPath 在 XSLT 中使用</h6><p>XPath 是 XSLT 标准中的主要元素。如果没有 XPath 方面的知识，您就无法创建 XSLT 文档。</p>
<h6 id="XPath-是-W3C-标准"><a href="#XPath-是-W3C-标准" class="headerlink" title="XPath 是 W3C 标准"></a>XPath 是 W3C 标准</h6><p>XPath 于 1999 年 11 月 16 日 成为 W3C 标准。</p>
<p>XPath 被设计为供 XSLT、XPointer 以及其他 XML 解析软件使用。</p>
<h3 id="XPath-节点（node）"><a href="#XPath-节点（node）" class="headerlink" title="XPath 节点（node）"></a>XPath 节点（node）</h3><p>在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档（根）节点。</p>
<p>XML 文档是被作为节点树来对待的。树的根被称为文档节点或者根节点。</p>
<h3 id="XPath-语法"><a href="#XPath-语法" class="headerlink" title="XPath 语法"></a>XPath 语法</h3><h3 id="XPath-轴"><a href="#XPath-轴" class="headerlink" title="XPath 轴"></a>XPath 轴</h3><h3 id="XPath-运算符"><a href="#XPath-运算符" class="headerlink" title="XPath 运算符"></a>XPath 运算符</h3><h3 id="XPath-实例"><a href="#XPath-实例" class="headerlink" title="XPath 实例"></a>XPath 实例</h3><h3 id="XPath-总结"><a href="#XPath-总结" class="headerlink" title="XPath 总结"></a>XPath 总结</h3><h2 id="XPath-参考手册"><a href="#XPath-参考手册" class="headerlink" title="XPath 参考手册"></a>XPath 参考手册</h2><h3 id="XPath-函数"><a href="#XPath-函数" class="headerlink" title="XPath 函数"></a>XPath 函数</h3>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/JavaScript/Xpath%E6%95%99%E7%A8%8B/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E5%95%86%E5%9F%8E/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E5%95%86%E5%9F%8E/" class="post-title-link" itemprop="url">前端/Vue+React+Angular/Vue/Vue商城</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:43:39" itemprop="dateModified" datetime="2020-06-26T15:43:39+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>8.4k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>8 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="Vue商城"><a href="#Vue商城" class="headerlink" title="Vue商城"></a>Vue商城</h1><p>二〇二〇年五月二十六日</p>
<p>二〇二〇年五月二十七日</p>
<p>首页布局和·动画效果</p>
<p>Promise</p>
<p>新闻资讯列表页布局和效果</p>
<p>评论功能</p>
<p>图片列表和详情页效果</p>
<p>Mint-UI中按钮组件的使用</p>
<p>Mint-UI中Toast组件的使用 </p>
<p>Mint-UI的按需导入组件</p>
<p>介绍MUI</p>
<p>MUI的使用</p>
<p>main.js文件的作用 项目的入口文件负责文件的导入 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</span><br><span class="line"><span class="comment">// vue 文件的入口文件</span></span><br><span class="line"><span class="keyword">import</span> app <span class="keyword">from</span> <span class="string">'./App.vue'</span>;</span><br><span class="line"><span class="comment">//mint-ui按需导入</span></span><br><span class="line"><span class="keyword">import</span> &#123; Header &#125; <span class="keyword">from</span> <span class="string">'mint-ui'</span>;</span><br><span class="line">Vue.component(Header.name, Header);</span><br><span class="line"><span class="comment">//mui的代码片段</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./lib/mui/css/mui.min.css'</span></span><br></pre></td></tr></table></figure>



<h2 id="MintUI-组件-基于vue-js移动端组件库"><a href="#MintUI-组件-基于vue-js移动端组件库" class="headerlink" title="MintUI 组件 基于vue.js移动端组件库"></a>MintUI 组件 基于vue.js移动端组件库</h2><p>Mint UI 基于Vue,js的移动端组件库 ，饿了么的 MintUI 组件</p>
<p><a href="https://github.com/ElemeFE/mint-ui" target="_blank" rel="noopener">Github 仓储地址</a></p>
<p><a href="http://mint-ui.github.io/#!/zh-cn" target="_blank" rel="noopener">Mint-UI 官方文档</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i mint-ui -S 安装 //vue2.0</span><br></pre></td></tr></table></figure>

<p>导入所有 MintUI 组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">main.js</span><br><span class="line"><span class="comment">// 引入全部组件</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</span><br><span class="line"><span class="keyword">import</span> MintUI <span class="keyword">from</span> <span class="string">'mint-ui'</span>; <span class="comment">// 把所有的组件都导入进来</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'mint-ui/lib/style.css'</span>;<span class="comment">// 可以省略 node_modules 这一层目录 导入样式表</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line">Vue.use(MintUI); <span class="comment">// 将Mint安装到Vue中 在 vue 中使用 MintUI 中的 Button 按钮和 Toast 弹框提示：</span></span><br><span class="line"><span class="comment">// 把所有的组件，注册为全局的组件</span></span><br><span class="line">app.vue</span><br><span class="line">&lt;mt-button type=<span class="string">"primary"</span> size=<span class="string">"large"</span>&gt;primary&lt;<span class="regexp">/mt-button&gt;</span></span><br></pre></td></tr></table></figure>

<p>按需导入的配置方式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 按需引入部分组件</span></span><br><span class="line"><span class="keyword">import</span> &#123; Cell, Checklist &#125; <span class="keyword">from</span> <span class="string">'mint-ui'</span>;</span><br><span class="line">Vue.component(Cell.name, Cell);</span><br><span class="line">Vue.component(Checklist.name, Checklist);</span><br><span class="line"></span><br><span class="line">app.vue</span><br><span class="line">&lt;mt-button type=<span class="string">"primary"</span> size=<span class="string">"large"</span>&gt;primary&lt;<span class="regexp">/mt-button&gt;</span></span><br></pre></td></tr></table></figure>

<p>借助 <a href="https://github.com/QingWei-Li/babel-plugin-component" target="_blank" rel="noopener">babel-plugin-component</a>，我们可以只引入需要的组件，以达到减小项目体积的目的。</p>
<p>首先，安装 babel-plugin-component：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-plugin-component -D</span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">"presets"</span>: [<span class="string">"env"</span>, <span class="string">"stage-0"</span>],</span><br><span class="line">  <span class="string">"plugins"</span>: [<span class="string">"transform-runtime"</span>, [<span class="string">"component"</span>, [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="string">"libraryName"</span>: <span class="string">"mint-ui"</span>,</span><br><span class="line">      <span class="string">"style"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]]]</span><br><span class="line">&#125;</span><br><span class="line">import &#123; Cell, Checklist &#125; from <span class="string">'mint-ui'</span>;</span><br><span class="line">Vue.component(Cell.name, Cell);</span><br><span class="line">Vue.component(Checklist.name, Checklist);</span><br></pre></td></tr></table></figure>



<h3 id="MUI-代码片段-（停止更新了）"><a href="#MUI-代码片段-（停止更新了）" class="headerlink" title="MUI 代码片段 （停止更新了）"></a>MUI 代码片段 （停止更新了）</h3><blockquote>
<p>注意： MUI 不同于 Mint-UI，MUI 只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的 HTML 代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE 项目进行集成开发；<br>因此，从体验上来说， Mint-UI 体验更好，因为这是别人帮我们开发好的现成的 Vue 组件；<br>从体验上来说， MUI 和 Bootstrap 类似；<br>理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI 只适用于 Vue 项目；</p>
<p>注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；</p>
</blockquote>
<p><a href="http://dev.dcloud.net.cn/mui/" target="_blank" rel="noopener">官网首页</a></p>
<p><a href="http://dev.dcloud.net.cn/mui/ui/" target="_blank" rel="noopener">文档地址</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;导入 MUI 的样式表：</span><br><span class="line">import &#39;..&#x2F;lib&#x2F;mui&#x2F;css&#x2F;mui.min.css&#39;</span><br><span class="line">&#x2F;&#x2F;在&#96;webpack.config.js&#96;中添加新的 loader 规则：</span><br><span class="line">&#123; test: &#x2F;\.(png|jpg|gif|ttf)$&#x2F;, use: &#39;url-loader&#39; &#125;</span><br><span class="line">根据官方提供的文档和 example，尝试使用相关的组件</span><br></pre></td></tr></table></figure>

<p>MinUI的组件</p>
<ul>
<li>JS components</li>
<li>CSS components</li>
</ul>
<p>![1 (C:\Users\Administrator\Pictures\壁纸\1 (3).jpg)](C:\Users\Administrator\Pictures\壁纸\1 (3).jpg)</p>
<h3 id="git版本管理工具"><a href="#git版本管理工具" class="headerlink" title="git版本管理工具"></a>git版本管理工具</h3><p><code>.gitignore 项目忽略文件</code></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">node_modules</span><br><span class="line">// 软件的配置文件</span><br><span class="line">.idea</span><br><span class="line">.vscode</span><br><span class="line">.git</span><br></pre></td></tr></table></figure>

<p><code>README.md 项目描述信息的文件</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><code>LICENSE 开源协议文件</code></p>
<p><a href="https://www.zhihu.com/question/19568896" target="_blank" rel="noopener">主流开源协议之间有何异同</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="将项目源码托管到-oschina-中"><a href="#将项目源码托管到-oschina-中" class="headerlink" title="将项目源码托管到 oschina 中"></a>将项目源码托管到 oschina 中</h3><ol>
<li><p>点击头像 -&gt; 修改资料 -&gt; SSH 公钥  和 <code>git config --global user.email ***@**.com</code> 来全局配置提交时用户的名称和邮箱</p>
</li>
<li><p>使用 <code>git init</code> 在本地初始化项目</p>
</li>
<li><p>使用 <code>touch README.md</code> 和 <code>touch .gitignore</code> 来创建项目的说明文件和忽略文件；</p>
</li>
<li><p>使用 <code>git add .</code> 将所有文件托管到 git 中</p>
</li>
<li><p>使用 <code>git commit -m &quot;init project&quot;</code> 将项目进行本地提交</p>
</li>
<li><p>使用 <code>git remote add origin 仓储地址</code>将本地项目和远程仓储连接，并使用 origin 最为远程仓储的别名</p>
</li>
<li><p>使用 <code>git push -u origin master</code> 将本地代码 push 到仓储中</p>
</li>
</ol>
<h3 id="App-vue-组件的基本设置"><a href="#App-vue-组件的基本设置" class="headerlink" title="App.vue 组件的基本设置"></a>App.vue 组件的基本设置</h3><ol>
<li><p>头部的固定导航栏使用 <code>Mint-UI</code> 的 <code>Header</code> 组件；</p>
</li>
<li><p>底部的页签使用 <code>mui</code> 的 <code>tabbar</code>;</p>
</li>
<li><p>购物车的图标，使用 <code>icons-extra</code> 中的 <code>mui-icon-extra mui-icon-extra-cart</code>，同时，应该把其依赖的字体图标文件 <code>mui-icons-extra.ttf</code>，复制到 <code>fonts</code> 目录下！</p>
</li>
<li><p>将底部的页签，改造成 <code>router-link</code> 来实现单页面的切换；</p>
</li>
<li><p>Tab Bar 路由激活时候设置高亮的两种方式：</p>
</li>
</ol>
<ul>
<li>全局设置样式如下：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.router-link-active&#123;</span><br><span class="line"></span><br><span class="line">    	color:#007aff !important;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>或者在 <code>new VueRouter</code> 的时候，通过 <code>linkActiveClass</code> 来指定高亮的类：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 创建路由对象</span><br><span class="line"></span><br><span class="line">  var router &#x3D; new VueRouter(&#123;</span><br><span class="line"></span><br><span class="line">    routes: [</span><br><span class="line"></span><br><span class="line">      &#123; path: &#39;&#x2F;&#39;, redirect: &#39;&#x2F;home&#39; &#125;</span><br><span class="line"></span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    linkActiveClass: &#39;mui-active&#39;</span><br><span class="line"></span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>

<h3 id="实现-tabbar-页签不同组件页面的切换"><a href="#实现-tabbar-页签不同组件页面的切换" class="headerlink" title="实现 tabbar 页签不同组件页面的切换"></a>实现 tabbar 页签不同组件页面的切换</h3><ol>
<li><p>将 tabbar 改造成 <code>router-link</code> 形式，并指定每个连接的 <code>to</code> 属性；</p>
</li>
<li><p>在入口文件中导入需要展示的组件，并创建路由对象：</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 导入需要展示的组件</span><br><span class="line"></span><br><span class="line">import Home from &#39;.&#x2F;components&#x2F;home&#x2F;home.vue&#39;</span><br><span class="line"></span><br><span class="line">import Member from &#39;.&#x2F;components&#x2F;member&#x2F;member.vue&#39;</span><br><span class="line"></span><br><span class="line">import Shopcar from &#39;.&#x2F;components&#x2F;shopcar&#x2F;shopcar.vue&#39;</span><br><span class="line"></span><br><span class="line">import Search from &#39;.&#x2F;components&#x2F;search&#x2F;search.vue&#39;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 创建路由对象</span><br><span class="line"></span><br><span class="line">var router &#x3D; new VueRouter(&#123;</span><br><span class="line"></span><br><span class="line">  routes: [</span><br><span class="line"></span><br><span class="line">    &#123; path: &#39;&#x2F;&#39;, redirect: &#39;&#x2F;home&#39; &#125;,</span><br><span class="line"></span><br><span class="line">    &#123; path: &#39;&#x2F;home&#39;, component: Home &#125;,</span><br><span class="line"></span><br><span class="line">    &#123; path: &#39;&#x2F;member&#39;, component: Member &#125;,</span><br><span class="line"></span><br><span class="line">    &#123; path: &#39;&#x2F;shopcar&#39;, component: Shopcar &#125;,</span><br><span class="line"></span><br><span class="line">    &#123; path: &#39;&#x2F;search&#39;, component: Search &#125;</span><br><span class="line"></span><br><span class="line">  ],</span><br><span class="line"></span><br><span class="line">  linkActiveClass: &#39;mui-active&#39;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="使用-mt-swipe-轮播图组件"><a href="#使用-mt-swipe-轮播图组件" class="headerlink" title="使用 mt-swipe 轮播图组件"></a>使用 mt-swipe 轮播图组件</h3><ol>
<li>假数据：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">lunbo: [</span><br><span class="line"></span><br><span class="line">        &#39;http:&#x2F;&#x2F;www.itcast.cn&#x2F;images&#x2F;slidead&#x2F;BEIJING&#x2F;2017440109442800.jpg&#39;,</span><br><span class="line"></span><br><span class="line">        &#39;http:&#x2F;&#x2F;www.itcast.cn&#x2F;images&#x2F;slidead&#x2F;BEIJING&#x2F;2017511009514700.jpg&#39;,</span><br><span class="line"></span><br><span class="line">        &#39;http:&#x2F;&#x2F;www.itcast.cn&#x2F;images&#x2F;slidead&#x2F;BEIJING&#x2F;2017421414422600.jpg&#39;</span><br><span class="line"></span><br><span class="line">      ]</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>引入轮播图组件：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- Mint-UI 轮播图组件 --&gt;</span><br><span class="line"></span><br><span class="line">    &lt;div class&#x3D;&quot;home-swipe&quot;&gt;</span><br><span class="line"></span><br><span class="line">      &lt;mt-swipe :auto&#x3D;&quot;4000&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;mt-swipe-item v-for&#x3D;&quot;(item, i) in lunbo&quot; :key&#x3D;&quot;i&quot;&gt;</span><br><span class="line"></span><br><span class="line">          &lt;img :src&#x3D;&quot;item&quot; alt&#x3D;&quot;&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;&#x2F;mt-swipe-item&gt;</span><br><span class="line"></span><br><span class="line">      &lt;&#x2F;mt-swipe&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">  &lt;&#x2F;div&gt;</span><br></pre></td></tr></table></figure>

<h3 id="在-vue组件中使用vue-resource获取数据"><a href="#在-vue组件中使用vue-resource获取数据" class="headerlink" title="在.vue组件中使用vue-resource获取数据"></a>在<code>.vue</code>组件中使用<code>vue-resource</code>获取数据</h3><ol>
<li><p>运行<code>cnpm i vue-resource -S</code>安装模块</p>
</li>
<li><p>导入 vue-resource 组件</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import VueResource from &#39;vue-resource&#39;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>在 vue 中使用 vue-resource 组件</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.use(VueResource);</span><br></pre></td></tr></table></figure>

<h3 id="使用-mui-的tab-top-webview-main完成分类滑动栏"><a href="#使用-mui-的tab-top-webview-main完成分类滑动栏" class="headerlink" title="使用 mui 的tab-top-webview-main完成分类滑动栏"></a>使用 mui 的<code>tab-top-webview-main</code>完成分类滑动栏</h3><h3 id="兼容问题"><a href="#兼容问题" class="headerlink" title="兼容问题"></a>兼容问题</h3><ol>
<li>和 App.vue 中的 <code>router-link</code> 身上的类名 <code>mui-tab-item</code> 存在兼容性问题，导致 tab 栏失效，可以把<code>mui-tab-item</code>改名为<code>mui-tab-item1</code>，并复制相关的类样式，来解决这个问题；</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">.mui-bar-tab .mui-tab-item1.mui-active &#123;</span><br><span class="line">  color: #007aff;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.mui-bar-tab .mui-tab-item1 &#123;</span><br><span class="line">  display: table-cell;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">  width: 1%;</span><br><span class="line">  height: 50px;</span><br><span class="line">  text-align: center;</span><br><span class="line">  vertical-align: middle;</span><br><span class="line">  white-space: nowrap;</span><br><span class="line">  text-overflow: ellipsis;</span><br><span class="line">  color: #929292;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.mui-bar-tab .mui-tab-item1 .mui-icon &#123;</span><br><span class="line">  top: 3px;</span><br><span class="line">  width: 24px;</span><br><span class="line">  height: 24px;</span><br><span class="line">  padding-top: 0;</span><br><span class="line">  padding-bottom: 0;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label &#123;</span><br><span class="line">  font-size: 11px;</span><br><span class="line">  display: block;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">  text-overflow: ellipsis;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li><code>tab-top-webview-main</code>组件第一次显示到页面中的时候，无法被滑动的解决方案：</li>
</ol>
<ul>
<li>先导入 mui 的 JS 文件:</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import mui from &#39;..&#x2F;..&#x2F;..&#x2F;lib&#x2F;mui&#x2F;js&#x2F;mui.min.js&#39;</span><br></pre></td></tr></table></figure>

<ul>
<li>在 组件的 <code>mounted</code> 事件钩子中，注册 mui 的滚动事件：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">mounted() &#123;</span><br><span class="line">  	&#x2F;&#x2F; 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件</span><br><span class="line">      mui(&#39;.mui-scroll-wrapper&#39;).scroll(&#123;</span><br><span class="line">        deceleration: 0.0005 &#x2F;&#x2F;flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006</span><br><span class="line">      &#125;);</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>滑动的时候报警告：<code>Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080</code></li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">解决方法，可以加上* &#123; touch-action: pan-y; &#125; 这句样式去掉。</span><br></pre></td></tr></table></figure>

<p>原因：（是 chrome 为了提高页面的滑动流畅度而新折腾出来的一个东西） <a href="http://www.cnblogs.com/pearl07/p/6589114.html" target="_blank" rel="noopener">http://www.cnblogs.com/pearl07/p/6589114.html</a><br><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action</a></p>
<h2 id="移除严格模式"><a href="#移除严格模式" class="headerlink" title="移除严格模式"></a>移除严格模式</h2><p><a href="https://github.com/genify/babel-plugin-transform-remove-strict-mode" target="_blank" rel="noopener">babel-plugin-transform-remove-strict-mode</a></p>
<p>项目外网测试</p>
<h2 id="开启-Apache-的-gzip-压缩"><a href="#开启-Apache-的-gzip-压缩" class="headerlink" title="开启 Apache 的 gzip 压缩"></a>开启 Apache 的 gzip 压缩</h2><p>要让 apache 支持 gzip 功能，要用到 deflate_Module 和 headers_Module。打开 apache 的配置文件 httpd.conf，大约在 105 行左右，找到以下两行内容：（这两行不是连续在一起的）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">#LoadModule deflate_module modules&#x2F;mod_deflate.so</span><br><span class="line">#LoadModule headers_module modules&#x2F;mod_headers.so</span><br></pre></td></tr></table></figure>

<p>然后将其前面的“#”注释删掉，表示开启 gzip 压缩功能。开启以后还需要进行相关配置。在 httpd.conf 文件的最后添加以下内容即可：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;IfModule deflate_module&gt;</span><br><span class="line">    #必须的，就像一个开关一样，告诉apache对传输到浏览器的内容进行压缩</span><br><span class="line">    SetOutputFilter DEFLATE</span><br><span class="line">    DeflateCompressionLevel 9</span><br><span class="line">&lt;&#x2F;IfModule&gt;</span><br></pre></td></tr></table></figure>

<p>最少需要加上以上内容，才可以生 gzip 功能生效。由于没有做其它的额外配置，所以其它相关的配置均使用 Apache 的默认设置。这里说一下参数“DeflateCompressionLevel”，它表示压缩级别，值从 1 到 9，值越大表示压缩的越厉害。</p>
<h2 id="使用-ngrok-将本机映射为一个外网的-Web-服务器"><a href="#使用-ngrok-将本机映射为一个外网的-Web-服务器" class="headerlink" title="使用 ngrok 将本机映射为一个外网的 Web 服务器"></a>使用 ngrok 将本机映射为一个外网的 Web 服务器</h2><p>注意：由于默认使用的美国的服务器进行中间转接，所以访问速度炒鸡慢，访问时可启用 FQ 软件，提高网页打开速度！</p>
<h2 id="键盘修饰符以及自定义键盘修饰符"><a href="#键盘修饰符以及自定义键盘修饰符" class="headerlink" title="键盘修饰符以及自定义键盘修饰符"></a>键盘修饰符以及自定义键盘修饰符</h2><h3 id="1-x-中自定义键盘修饰符【了解即可】"><a href="#1-x-中自定义键盘修饰符【了解即可】" class="headerlink" title="1.x 中自定义键盘修饰符【了解即可】"></a>1.x 中自定义键盘修饰符【了解即可】</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(&#39;on&#39;).keyCodes.f2 &#x3D; 113;</span><br></pre></td></tr></table></figure>

<h3 id="2-x-中自定义键盘修饰符"><a href="#2-x-中自定义键盘修饰符" class="headerlink" title="2.x 中自定义键盘修饰符"></a><a href="https://cn.vuejs.org/v2/guide/events.html#键值修饰符" target="_blank" rel="noopener">2.x 中自定义键盘修饰符</a></h3><ol>
<li>通过<code>Vue.config.keyCodes.名称 = 按键值</code>来自定义案件修饰符的别名：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.config.keyCodes.f2 &#x3D; 113;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>使用自定义的按键修饰符：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;name&quot; @keyup.f2&#x3D;&quot;add&quot;&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue-js2-0-的新特性"><a href="#Vue-js2-0-的新特性" class="headerlink" title="Vue.js2.0 的新特性"></a>Vue.js2.0 的新特性</h2><h3 id="Render-函数渲染组件"><a href="#Render-函数渲染组件" class="headerlink" title="Render 函数渲染组件"></a>Render 函数渲染组件</h3><h3 id="服务器端渲染"><a href="#服务器端渲染" class="headerlink" title="服务器端渲染"></a>服务器端渲染</h3><h2 id="品牌管理案例"><a href="#品牌管理案例" class="headerlink" title="品牌管理案例"></a>品牌管理案例</h2><h3 id="添加新品牌"><a href="#添加新品牌" class="headerlink" title="添加新品牌"></a>添加新品牌</h3><h3 id="删除品牌"><a href="#删除品牌" class="headerlink" title="删除品牌"></a>删除品牌</h3><h3 id="根据条件筛选品牌"><a href="#根据条件筛选品牌" class="headerlink" title="根据条件筛选品牌"></a>根据条件筛选品牌</h3><ol>
<li>1.x 版本中的filterBy指令，在2.x中已经被废除：</li>
</ol>
<p><a href="https://v1-cn.vuejs.org/api/#filterBy" target="_blank" rel="noopener">filterBy - 指令</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;tr v-for&#x3D;&quot;item in list | filterBy searchName in &#39;name&#39;&quot;&gt;</span><br><span class="line"></span><br><span class="line">  &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">  &lt;td&gt;&#123;&#123;item.name&#125;&#125;&lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">  &lt;td&gt;&#123;&#123;item.ctime&#125;&#125;&lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">  &lt;td&gt;</span><br><span class="line"></span><br><span class="line">    &lt;a href&#x3D;&quot;#&quot; @click.prevent&#x3D;&quot;del(item.id)&quot;&gt;删除&lt;&#x2F;a&gt;</span><br><span class="line"></span><br><span class="line">  &lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;tr&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>在2.x版本中<a href="https://cn.vuejs.org/v2/guide/list.html#显示过滤-排序结果" target="_blank" rel="noopener">手动实现筛选的方式</a>：</li>
</ol>
<ul>
<li>筛选框绑定到 VM 实例中的 <code>searchName</code> 属性：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;hr&gt; 输入筛选名称：</span><br><span class="line"></span><br><span class="line">&lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;searchName&quot;&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>在使用 <code>v-for</code> 指令循环每一行数据的时候，不再直接 <code>item in list</code>，而是 <code>in</code> 一个 过滤的methods 方法，同时，把过滤条件<code>searchName</code>传递进去：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;tbody&gt;</span><br><span class="line"></span><br><span class="line">      &lt;tr v-for&#x3D;&quot;item in search(searchName)&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">        &lt;td&gt;&#123;&#123;item.name&#125;&#125;&lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">        &lt;td&gt;&#123;&#123;item.ctime&#125;&#125;&lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">        &lt;td&gt;</span><br><span class="line"></span><br><span class="line">          &lt;a href&#x3D;&quot;#&quot; @click.prevent&#x3D;&quot;del(item.id)&quot;&gt;删除&lt;&#x2F;a&gt;</span><br><span class="line"></span><br><span class="line">        &lt;&#x2F;td&gt;</span><br><span class="line"></span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line"></span><br><span class="line">    &lt;&#x2F;tbody&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>search</code> 过滤方法中，使用 数组的 <code>filter</code> 方法进行过滤：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">search(name) &#123;</span><br><span class="line"></span><br><span class="line">  return this.list.filter(x &#x3D;&gt; &#123;</span><br><span class="line"></span><br><span class="line">    return x.name.indexOf(name) !&#x3D; -1;</span><br><span class="line"></span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>###</p>
<p>axios 知识扩展</p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E5%95%86%E5%9F%8E/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/vue%E5%BC%80%E5%8F%91%E7%BB%84%E4%BB%B6%E5%BA%93/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/vue%E5%BC%80%E5%8F%91%E7%BB%84%E4%BB%B6%E5%BA%93/" class="post-title-link" itemprop="url">前端/Vue+React+Angular/Vue/vue开发组件库</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:43:39" itemprop="dateModified" datetime="2020-06-26T15:43:39+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>7.6k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>7 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="一、UI组件及框架"><a href="#一、UI组件及框架" class="headerlink" title="一、UI组件及框架"></a><strong>一、UI组件及框架</strong></h2><ol>
<li><a href="https://github.com/ElemeFE/element" target="_blank" rel="noopener">element</a> - 饿了么出品的Vue2的web UI工具套件</li>
<li><a href="https://github.com/ElemeFE/mint-ui" target="_blank" rel="noopener">mint-ui</a> - Vue 2的移动UI元素</li>
<li><a href="https://github.com/iview/iview" target="_blank" rel="noopener">iview</a> - 基于 Vuejs 的开源 UI 组件库</li>
<li><a href="https://github.com/JosephusPaye/Keen-UI" target="_blank" rel="noopener">Keen-UI</a> - 轻量级的基本UI组件合集</li>
<li><a href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">vue-material</a> - 通过Vue Material和Vue 2建立精美的app应用</li>
<li><a href="https://github.com/museui/muse-ui" target="_blank" rel="noopener">muse-ui</a> - 三端样式一致的响应式 UI 库</li>
<li><a href="https://github.com/vuetifyjs/vuetify" target="_blank" rel="noopener">vuetify</a> - 为移动而生的Vue JS 2组件框架</li>
<li><a href="https://github.com/wangdahoo/vonic" target="_blank" rel="noopener">vonic</a> - 快速构建移动端单页应用</li>
<li><a href="https://github.com/chenz24/vue-blu" target="_blank" rel="noopener">vue-blu</a> - 帮助你轻松创建web应用</li>
<li><a href="https://github.com/monterail/vue-multiselect" target="_blank" rel="noopener">vue-multiselect</a> - Vue.js选择框解决方案</li>
<li><a href="https://github.com/OYsun/VueCircleMenu" target="_blank" rel="noopener">VueCircleMenu</a> - 漂亮的vue圆环菜单</li>
<li><a href="https://github.com/Coffcer/vue-chat" target="_blank" rel="noopener">vue-chat</a> - vuejs和vuex及webpack的聊天示例</li>
<li><a href="https://github.com/luojilab/radon-ui" target="_blank" rel="noopener">radon-ui</a> - 快速开发产品的Vue组件库</li>
<li><a href="https://github.com/MopTym/vue-waterfall" target="_blank" rel="noopener">vue-waterfall</a> - Vue.js的瀑布布局组件</li>
<li><a href="https://github.com/myronliu347/vue-carbon" target="_blank" rel="noopener">vue-carbon</a> - 基于 vue 开发MD风格的移动端</li>
<li><a href="https://github.com/FE-Driver/vue-beauty" target="_blank" rel="noopener">vue-beauty</a> - 由vue和ant design创建的优美UI组件</li>
<li><a href="https://github.com/pi0/bootstrap-vue" target="_blank" rel="noopener">bootstrap-vue</a> - 应用于Vuejs2的Twitter的Bootstrap 4组件</li>
<li><a href="https://github.com/taylorchen709/vueAdmin" target="_blank" rel="noopener">vueAdmin</a> - 基于vuejs2和element的简单的管理员模板</li>
<li><a href="https://github.com/lisiyizu/vue-ztree" target="_blank" rel="noopener">vue-ztree</a> - 用 vue 写的树层级组件</li>
<li><a href="https://github.com/weibangtuo/vue-tree" target="_blank" rel="noopener">vue-tree</a> - vue树视图组件</li>
<li><a href="https://github.com/alexqdjay/vue-tabs" target="_blank" rel="noopener">vue-tabs</a> - 多tab页轻型框架</li>
</ol>
<h3 id=""><a href="#" class="headerlink" title=""></a></h3><h3 id="二、滚动scroll组件"><a href="#二、滚动scroll组件" class="headerlink" title="二、滚动scroll组件"></a><strong>二、滚动scroll组件</strong></h3><ol>
<li><a href="https://github.com/wangdahoo/vue-scroller" target="_blank" rel="noopener">vue-scroller</a> - Vonic UI的功能性组件</li>
<li><a href="https://github.com/egoist/vue-mugen-scroll" target="_blank" rel="noopener">vue-mugen-scroll</a> - 无限滚动组件</li>
<li><a href="https://github.com/PeachScript/vue-infinite-loading" target="_blank" rel="noopener">vue-infinite-loading</a> - VueJS的无限滚动插件</li>
<li><a href="https://github.com/Akryum/vue-virtual-scroller" target="_blank" rel="noopener">vue-virtual-scroller</a> - 带任意数目数据的顺畅的滚动</li>
<li><a href="https://github.com/ElemeFE/vue-infinite-scroll" target="_blank" rel="noopener">vue-infinite-scroll</a> - VueJS的无限滚动指令</li>
<li><a href="https://github.com/BosNaufal/vue-scrollbar" target="_blank" rel="noopener">vue-scrollbar</a> - 最简单的滚动区域组件</li>
<li><a href="https://github.com/suguangwen/vue-scroll" target="_blank" rel="noopener">vue-scroll</a> - vue滚动</li>
<li><a href="https://github.com/bajian/vue-pull-to-refresh" target="_blank" rel="noopener">vue-pull-to-refresh</a> - Vue2的上拉下拉</li>
<li><a href="https://github.com/mint-ui/mint-loadmore" target="_blank" rel="noopener">mint-loadmore</a> - VueJS的双向下拉刷新组件</li>
<li><a href="https://github.com/Teddy-Zhu/vue-smoothscroll" target="_blank" rel="noopener">vue-smoothscroll</a> - smoothscroll的VueJS版本</li>
</ol>
<h3 id="-1"><a href="#-1" class="headerlink" title=""></a></h3><h3 id="三、slider组件"><a href="#三、slider组件" class="headerlink" title="三、slider组件"></a><strong>三、slider组件</strong></h3><ol>
<li><a href="https://github.com/surmon-china/vue-awesome-swiper" target="_blank" rel="noopener">vue-awesome-swiper</a> - vue.js触摸滑动组件</li>
<li><a href="https://github.com/staskjs/vue-slick" target="_blank" rel="noopener">vue-slick</a> - 实现流畅轮播框的vue组件</li>
<li><a href="https://github.com/ElemeFE/vue-swipe" target="_blank" rel="noopener">vue-swipe</a> - VueJS触摸滑块</li>
<li><a href="https://github.com/weilao/vue-swiper" target="_blank" rel="noopener">vue-swiper</a> - 易于使用的滑块组件</li>
<li><a href="https://github.com/littlewin-wang/vue-images" target="_blank" rel="noopener">vue-images</a> - 显示一组图片的lightbox组件</li>
<li><a href="https://github.com/Wlada/vue-carousel-3d" target="_blank" rel="noopener">vue-carousel-3d</a> - VueJS的3D轮播组件</li>
<li><a href="https://github.com/hilongjw/vue-slide" target="_blank" rel="noopener">vue-slide</a> - vue轻量级滑动组件</li>
<li><a href="https://github.com/warpcgd/vue-slider" target="_blank" rel="noopener">vue-slider</a> - vue 滑动组件</li>
<li><a href="https://github.com/shiye515/vue-m-carousel" target="_blank" rel="noopener">vue-m-carousel</a> - vue 移动端轮播组件</li>
<li><a href="https://github.com/ibufu/dd-vue-component" target="_blank" rel="noopener">dd-vue-component</a> - 订单来了的公共组件库</li>
<li><a href="https://github.com/shhdgit/vue-easy-slider" target="_blank" rel="noopener">vue-easy-slider</a> - Vue 2.x的滑块组件</li>
</ol>
<h3 id="四、编辑器"><a href="#四、编辑器" class="headerlink" title="四、编辑器** **"></a><strong>四、编辑器**</strong> **</h3><ol>
<li><a href="https://github.com/jrainlau/markcook" target="_blank" rel="noopener">markcook</a> - 好看的markdown编辑器</li>
<li><a href="https://github.com/egoist/eme" target="_blank" rel="noopener">eme</a> - 优雅的Markdown编辑器</li>
<li><a href="https://github.com/vuejs/vue-syntax-highlight" target="_blank" rel="noopener">vue-syntax-highlight</a> - Sublime Text语法高亮</li>
<li><a href="https://github.com/surmon-china/vue-quill-editor" target="_blank" rel="noopener">vue-quill-editor</a> - 基于Quill适用于Vue2的富文本编辑器</li>
<li><a href="https://github.com/hifarer/Vueditor" target="_blank" rel="noopener">Vueditor</a> - 所见即所得的编辑器</li>
<li><a href="https://github.com/PeakTai/vue-html5-editor" target="_blank" rel="noopener">vue-html5-editor</a> - html5所见即所得编辑器</li>
<li><a href="https://github.com/davidroyer/vue2-editor" target="_blank" rel="noopener">vue2-editor</a> - HTML编辑器</li>
<li><a href="https://github.com/F-loat/vue-simplemde" target="_blank" rel="noopener">vue-simplemde</a> - VueJS的Markdown编辑器组件</li>
<li><a href="https://github.com/CroudSupport/vue-quill" target="_blank" rel="noopener">vue-quill</a> - vue组件构建quill编辑器</li>
</ol>
<h3 id="五、图表"><a href="#五、图表" class="headerlink" title="五、图表"></a><strong>五、图表</strong></h3><ol>
<li><a href="https://github.com/ratiw/vue-table" target="_blank" rel="noopener">vue-table</a> - 简化数据表格</li>
<li><a href="https://github.com/apertureless/vue-chartjs" target="_blank" rel="noopener">vue-chartjs</a> - vue中的Chartjs的封装</li>
<li><a href="https://github.com/hchstera/vue-charts" target="_blank" rel="noopener">vue-charts</a> - 轻松渲染一个图表</li>
<li><a href="https://github.com/miaolz123/vue-chart" target="_blank" rel="noopener">vue-chart</a> - 强大的高速的vue图表解析</li>
<li><a href="https://github.com/weizhenye/vue-highcharts" target="_blank" rel="noopener">vue-highcharts</a> - HighCharts组件</li>
<li><a href="https://github.com/vue-bulma/chartjs" target="_blank" rel="noopener">chartjs</a> - Vue Bulma的chartjs组件</li>
<li><a href="https://github.com/ankane/vue-chartkick" target="_blank" rel="noopener">vue-chartkick</a> - VueJS一行代码实现优美图表</li>
</ol>
<h3 id="六、日历"><a href="#六、日历" class="headerlink" title="六、日历"></a><strong>六、日历</strong></h3><ol>
<li><a href="https://github.com/jinzhe/vue-calendar" target="_blank" rel="noopener">vue-calendar</a> - 日期选择插件</li>
<li><a href="https://github.com/hilongjw/vue-datepicker" target="_blank" rel="noopener">vue-datepicker</a> - 日历和日期选择组件</li>
<li><a href="https://github.com/Haixing-Hu/vue-datetime-picker" target="_blank" rel="noopener">vue-datetime-picker</a> - 日期时间选择控件</li>
<li><a href="https://github.com/icai/vue2-calendar" target="_blank" rel="noopener">vue2-calendar</a> - 支持lunar和日期事件的日期选择器</li>
<li><a href="https://github.com/Wanderxx/vue-fullcalendar" target="_blank" rel="noopener">vue-fullcalendar</a> - 基于vue.js的全日历组件</li>
<li><a href="https://github.com/weifeiyue/vue-datepicker" target="_blank" rel="noopener">vue-datepicker</a> - 漂亮的Vue日期选择器组件</li>
<li><a href="https://github.com/vue-bulma/datepicker" target="_blank" rel="noopener">datepicker</a> - 基于flatpickr的时间选择组件</li>
<li><a href="https://github.com/phoenixwong/vue2-timepicker" target="_blank" rel="noopener">vue2-timepicker</a> - 下拉时间选择器</li>
<li><a href="https://github.com/Bubblings/vue-date-picker" target="_blank" rel="noopener">vue-date-picker</a> - VueJS日期选择器组件</li>
<li><a href="https://github.com/dai-siki/vue-datepicker-simple" target="_blank" rel="noopener">vue-datepicker-simple</a> - 基于vue的日期选择器</li>
</ol>
<h3 id="七、地址选择"><a href="#七、地址选择" class="headerlink" title="七、地址选择"></a><strong>七、地址选择</strong></h3><ol>
<li><a href="https://github.com/xinxingyu/vue-city" target="_blank" rel="noopener">vue-city</a> - 城市选择器</li>
<li><a href="https://github.com/QingWei-Li/vue-region-picker" target="_blank" rel="noopener">vue-region-picker</a> - 选择中国的省份市和地区</li>
</ol>
<h3 id="八、地图"><a href="#八、地图" class="headerlink" title="八、地图"></a><strong>八、地图</strong></h3><ol>
<li><a href="https://github.com/ElemeFE/vue-amap" target="_blank" rel="noopener">vue-amap</a> - 基于Vue 2和高德地图的地图组件</li>
<li><a href="https://github.com/GuillaumeLeclerc/vue-google-maps" target="_blank" rel="noopener">vue-google-maps</a> - 带有双向数据绑定Google地图组件</li>
<li><a href="https://github.com/Dafrok/vue-baidu-map" target="_blank" rel="noopener">vue-baidu-map</a>- 基于 Vue 2的百度地图组件库</li>
<li><a href="https://github.com/doodlewind/vue-cmap" target="_blank" rel="noopener">vue-cmap</a> - Vue China map可视化组件</li>
</ol>
<h3 id="九、播放器"><a href="#九、播放器" class="headerlink" title="九、播放器"></a><strong>九、播放器</strong></h3><ol>
<li><a href="https://github.com/surmon-china/vue-video-player" target="_blank" rel="noopener">vue-video-player</a> - VueJS视频及直播播放器</li>
<li><a href="https://github.com/hilongjw/vue-video" target="_blank" rel="noopener">vue-video</a> - Vue.js的HTML5视频播放器</li>
<li><a href="https://github.com/yunyi1895/vue-music-master" target="_blank" rel="noopener">vue-music-master</a> - vue手机端网页音乐播放器</li>
</ol>
<h3 id="十、文件上传"><a href="#十、文件上传" class="headerlink" title="十、文件上传"></a><strong>十、文件上传</strong></h3><ol>
<li><a href="https://github.com/lian-yue/vue-upload-component" target="_blank" rel="noopener">vue-upload-component</a> - Vuejs文件上传组件</li>
<li><a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank" rel="noopener">vue-core-image-upload</a> - 轻量级的vue上传插件</li>
<li><a href="https://github.com/rowanwins/vue-dropzone" target="_blank" rel="noopener">vue-dropzone</a> - 用于文件上传的Vue组件</li>
</ol>
<h3 id="十一、图片处理"><a href="#十一、图片处理" class="headerlink" title="十一、图片处理"></a><strong>十一、图片处理</strong></h3><ol>
<li><a href="https://github.com/JALBAA/vue-lazyload-img" target="_blank" rel="noopener">vue-lazyload-img</a> - 移动优化的vue图片懒加载插件</li>
<li><a href="https://github.com/dai-siki/vue-image-crop-upload" target="_blank" rel="noopener">vue-image-crop-upload</a> - vue图片剪裁上传组件</li>
<li><a href="https://github.com/MMF-FE/vue-svgicon" target="_blank" rel="noopener">vue-svgicon</a> - 创建svg图标组件的工具</li>
<li><a href="https://github.com/JackGit/vue-img-loader" target="_blank" rel="noopener">vue-img-loader</a> - 图片加载UI组件</li>
<li><a href="https://github.com/legeneek/vue-image-clip" target="_blank" rel="noopener">vue-image-clip</a>- 基于vue的图像剪辑组件</li>
<li><a href="https://github.com/MatteoGabriele/vue-progressive-image" target="_blank" rel="noopener">vue-progressive-image</a> - Vue的渐进图像加载插件</li>
</ol>
<h3 id="十二、提示"><a href="#十二、提示" class="headerlink" title="十二、提示"></a><strong>十二、提示</strong></h3><ol>
<li><a href="https://github.com/ElemeFE/vue-toast-mobile" target="_blank" rel="noopener">vue-toast-mobile</a> - VueJS的toast插件</li>
<li><a href="https://github.com/ElemeFE/vue-msgbox" target="_blank" rel="noopener">vue-msgbox</a> - vuejs的消息框</li>
<li><a href="https://github.com/Akryum/vue-tooltip" target="_blank" rel="noopener">vue-tooltip</a> - 带绑定信息提示的提示工具</li>
<li><a href="https://github.com/aweiu/vue-verify-pop" target="_blank" rel="noopener">vue-verify-pop</a> - 带气泡提示的vue校验插件</li>
</ol>
<h3 id="十三、进度条"><a href="#十三、进度条" class="headerlink" title="十三、进度条"></a><strong>十三、进度条</strong></h3><ol>
<li><a href="https://github.com/wyzant-dev/vue-radial-progress" target="_blank" rel="noopener">vue-radial-progress</a> - Vue.js放射性进度条组件</li>
<li><a href="https://github.com/hilongjw/vue-progressbar" target="_blank" rel="noopener">vue-progressbar</a> - vue轻量级进度条</li>
<li><a href="https://github.com/BosNaufal/vue2-loading-bar" target="_blank" rel="noopener">vue2-loading-bar</a> - 最简单的仿Youtube加载条视图</li>
</ol>
<h2 id="十四、开发框架汇总"><a href="#十四、开发框架汇总" class="headerlink" title="十四、开发框架汇总"></a><strong>十四、开发框架汇总</strong></h2><ol>
<li><a href="https://github.com/fundon/vue-admin" target="_blank" rel="noopener">vue-admin</a> - Vue管理面板框架</li>
<li><a href="https://github.com/SimulatedGREG/electron-vue" target="_blank" rel="noopener">electron-vue</a> - Electron及VueJS快速启动样板</li>
<li><a href="https://github.com/petervmeijgaard/vue-2.0-boilerplate" target="_blank" rel="noopener">vue-2.0-boilerplate</a> - Vue2单页应用样板</li>
<li><a href="https://github.com/rodzzlessa24/vue-webgulp" target="_blank" rel="noopener">vue-webgulp</a> - 仿VueJS Vue loader示例</li>
<li><a href="https://github.com/wangxg2016/vue-bulma" target="_blank" rel="noopener">vue-bulma</a> - 轻量级高性能MVVM Admin UI框架</li>
<li><a href="https://github.com/hanan198501/vue-spa-template" target="_blank" rel="noopener">vue-spa-template</a> - 前后端分离后的单页应用开发</li>
<li><a href="https://github.com/nolimits4web/Framework7-Vue" target="_blank" rel="noopener">Framework7-Vue</a> - VueJS与Framework7结合</li>
<li><a href="https://github.com/Metnew/vue-element-starter" target="_blank" rel="noopener">vue-element-starter</a> - vue启动页</li>
</ol>
<h2 id="十五、实用库汇总"><a href="#十五、实用库汇总" class="headerlink" title="十五、实用库汇总"></a><strong>十五、实用库汇总</strong></h2><ol>
<li><a href="https://github.com/monterail/vuelidate" target="_blank" rel="noopener">vuelidate</a> - 简单轻量级的基于模块的Vue.js验证</li>
<li><a href="https://github.com/zerqu/qingcheng" target="_blank" rel="noopener">qingcheng</a> - qingcheng主题</li>
<li><a href="https://github.com/vuejs/vuex" target="_blank" rel="noopener">vuex</a> - 专为 Vue.js 应用程序开发的状态管理模式</li>
<li><a href="https://github.com/imcvampire/vue-axios" target="_blank" rel="noopener">vue-axios</a> - 将axios整合到VueJS的封装</li>
<li><a href="https://github.com/ElemeFE/vue-desktop" target="_blank" rel="noopener">vue-desktop</a> - 创建管理面板网站的UI库</li>
<li><a href="https://github.com/declandewet/vue-meta" target="_blank" rel="noopener">vue-meta</a> - 管理app的meta信息</li>
<li><a href="https://github.com/eddyerburgh/avoriaz" target="_blank" rel="noopener">avoriaz</a> - VueJS测试实用工具库</li>
<li><a href="https://github.com/lmk123/vue-framework7" target="_blank" rel="noopener">vue-framework7</a> - 结合VueJS使用的Framework7组件</li>
<li><a href="https://github.com/yeyuqiudeng/vue-lazy-render" target="_blank" rel="noopener">vue-lazy-render</a> - 用于Vue组件的延迟渲染</li>
<li><a href="https://github.com/cenkai88/vue-svg-icon" target="_blank" rel="noopener">vue-svg-icon</a> - vue2的可变彩色svg图标方案</li>
<li><a href="https://github.com/Sopamo/vue-online" target="_blank" rel="noopener">vue-online</a> - reactive的在线和离线组件</li>
<li><a href="https://github.com/apertureless/vue-password-strength-meter" target="_blank" rel="noopener">vue-password-strength-meter</a> - 交互式密码强度计</li>
<li><a href="https://github.com/QingWei-Li/vuep" target="_blank" rel="noopener">vuep</a> - 用实时编辑和预览来渲染Vue组件</li>
<li><a href="https://github.com/Coffcer/vue-bootstrap-modal" target="_blank" rel="noopener">vue-bootstrap-modal</a> - vue的Bootstrap样式组件</li>
<li><a href="https://github.com/lynzz/element-admin" target="_blank" rel="noopener">element-admin</a> - 支持 vuecli 的 Element UI 的后台模板</li>
<li><a href="https://github.com/iFgR/vue-shortkey" target="_blank" rel="noopener">vue-shortkey</a> - 应用于Vue.js的Vue-ShortKey 插件</li>
<li><a href="https://github.com/vue-bulma/cleave" target="_blank" rel="noopener">cleave</a> - 基于cleave.js的Cleave组件</li>
<li><a href="https://github.com/cklmercer/vue-events" target="_blank" rel="noopener">vue-events</a> - 简化事件的VueJS插件</li>
<li><a href="https://github.com/FranckFreiburger/http-vue-loader" target="_blank" rel="noopener">http-vue-loader</a> - 从html及js环境加载vue文件</li>
<li><a href="https://github.com/SimulatedGREG/vue-electron" target="_blank" rel="noopener">vue-electron</a> - 将选择的API封装到Vue对象中的插件</li>
<li><a href="https://github.com/weinot/vue-router-transition" target="_blank" rel="noopener">vue-router-transition</a> - 页面过渡插件</li>
<li><a href="https://github.com/gocanto/vuemit" target="_blank" rel="noopener">vuemit</a> - 处理VueJS事件</li>
<li><a href="https://github.com/kartsims/vue-cordova" target="_blank" rel="noopener">vue-cordova</a> - Cordova的VueJS插件</li>
<li><a href="https://github.com/superman66/vue-qart" target="_blank" rel="noopener">vue-qart</a> - 用于qartjs的Vue2指令</li>
<li><a href="https://github.com/icebob/vue-websocket" target="_blank" rel="noopener">vue-websocket</a> - VueJS的Websocket插件</li>
<li><a href="https://github.com/mlyknown/vue-gesture" target="_blank" rel="noopener">vue-gesture</a> - VueJS的手势事件插件</li>
<li><a href="https://github.com/pinguinjkeke/vue-local-storage" target="_blank" rel="noopener">vue-local-storage</a> - 具有类型支持的Vuejs本地储存插件</li>
<li><a href="https://github.com/gocanto/lazy-vue" target="_blank" rel="noopener">lazy-vue</a> - 懒加载图片</li>
<li><a href="https://github.com/yodfz/vue-lazyloadImg" target="_blank" rel="noopener">vue-lazyloadImg</a> - 图片懒加载插件</li>
<li><a href="https://github.com/yangmingshan/vue-bus" target="_blank" rel="noopener">vue-bus</a> - VueJS的事件总线</li>
<li><a href="https://github.com/Akryum/vue-observe-visibility" target="_blank" rel="noopener">vue-observe-visibility</a> - 当元素在页面上可见或隐藏时检测</li>
<li><a href="https://github.com/se-panfilov/vue-notifications" target="_blank" rel="noopener">vue-notifications</a> - 非阻塞通知库</li>
<li><a href="https://github.com/AStaroverov/v-media-query" target="_blank" rel="noopener">v-media-query</a> - vue中添加用于配合媒体查询的方法</li>
<li><a href="https://github.com/xanf/vuex-shared-mutations" target="_blank" rel="noopener">vuex-shared-mutations</a> - 分享某种Vuex mutations</li>
<li><a href="https://github.com/Coffcer/vue-lazy-component" target="_blank" rel="noopener">vue-lazy-component</a> - 懒加载组件或者元素的Vue指令</li>
<li><a href="https://github.com/ropbla9/vue-reactive-storage" target="_blank" rel="noopener">vue-reactive-storage</a> - vue插件的Reactive层</li>
<li><a href="https://github.com/HerringtonDarkholme/vue-ts-loader" target="_blank" rel="noopener">vue-ts-loader</a> - 在Vue装载机检查脚本</li>
<li><a href="https://github.com/matfish2/vue-pagination-2" target="_blank" rel="noopener">vue-pagination-2</a> - 简单通用的分页组件</li>
<li><a href="https://github.com/dkfbasel/vuex-i18n" target="_blank" rel="noopener">vuex-i18n</a> - 定位插件</li>
<li><a href="https://github.com/David-Desmaisons/Vue.resize" target="_blank" rel="noopener">Vue.resize</a> - 检测HTML调整大小事件的vue指令</li>
<li><a href="https://github.com/vue-comps/vue-zoombox" target="_blank" rel="noopener">vue-zoombox</a> - 一个高级zoombox</li>
<li><a href="https://github.com/LeoHuiyi/leo-vue-validator" target="_blank" rel="noopener">leo-vue-validator</a> - 异步的表单验证组件</li>
<li><a href="https://github.com/vue-bulma/modal" target="_blank" rel="noopener">modal</a> - Vue Bulma的modal组件</li>
<li><a href="https://github.com/irwansyahwii/Famous-Vue" target="_blank" rel="noopener">Famous-Vue</a> - Famous库的vue组件</li>
<li><a href="https://github.com/syropian/vue-input-autosize" target="_blank" rel="noopener">vue-input-autosize</a> - 基于内容自动调整文本输入的大小</li>
<li><a href="https://github.com/BosNaufal/vue-file-base64" target="_blank" rel="noopener">vue-file-base64</a> - 将文件转换为Base64的vue组件</li>
<li><a href="https://github.com/MetinSeylan/Vue-Easy-Validator" target="_blank" rel="noopener">Vue-Easy-Validator</a> - 简单的表单验证</li>
<li><a href="https://github.com/imcvampire/vue-truncate-filter" target="_blank" rel="noopener">vue-truncate-filter</a> - 截断字符串的VueJS过滤器</li>
</ol>
<h2 id="十六、服务端"><a href="#十六、服务端" class="headerlink" title="十六、服务端"></a><strong>十六、服务端</strong></h2><ol>
<li><a href="https://github.com/hilongjw/vue-ssr" target="_blank" rel="noopener">vue-ssr</a> - 结合Express使用Vue2服务端渲染</li>
<li><a href="https://github.com/nuxt/nuxt.js" target="_blank" rel="noopener">nuxt.js</a> - 用于服务器渲染Vue app的最小化框架</li>
<li><a href="https://github.com/ccforward/vue-ssr" target="_blank" rel="noopener">vue-ssr</a> - 非常简单的VueJS服务器端渲染模板</li>
<li><a href="https://github.com/leaves4j/vue-easy-renderer" target="_blank" rel="noopener">vue-easy-renderer</a> - Nodejs服务端渲染</li>
<li><a href="https://github.com/danmademe/express-vue" target="_blank" rel="noopener">express-vue</a> - 简单的使用服务器端渲染vue.js</li>
</ol>
<h2 id="十七、辅助工具"><a href="#十七、辅助工具" class="headerlink" title="十七、辅助工具"></a><strong>十七、辅助工具</strong></h2><ol>
<li><a href="https://github.com/MiCottOn/DejaVue" target="_blank" rel="noopener">DejaVue</a> - Vuejs可视化及压力测试</li>
<li><a href="https://github.com/NetanelBasal/vue-generate-component" target="_blank" rel="noopener">vue-generate-component</a> - 轻松生成Vue js组件的CLI工具</li>
<li><a href="https://github.com/OYsun/vscode-VueHelper" target="_blank" rel="noopener">vscode-VueHelper</a> - 目前vscode最好的vue代码提示插件</li>
<li><a href="https://github.com/vue-play/vue-play" target="_blank" rel="noopener">vue-play</a> - 展示Vue组件的最小化框架</li>
<li><a href="https://github.com/MetinSeylan/VuejsStarterKit" target="_blank" rel="noopener">VuejsStarterKit</a> - vuejs starter套件</li>
<li><a href="https://github.com/xwpongithub/vue-multipage-cli" target="_blank" rel="noopener">vue-multipage-cli</a> - 简单的多页CLI</li>
</ol>
<h2 id="十八、应用实例"><a href="#十八、应用实例" class="headerlink" title="十八、应用实例"></a><strong>十八、应用实例</strong></h2><ol>
<li><a href="https://github.com/pagekit/pagekit" target="_blank" rel="noopener">pagekit</a> - 轻量级的CMS建站系统</li>
<li><a href="https://github.com/Vuedo/vuedo" target="_blank" rel="noopener">vuedo</a> - 博客平台</li>
<li><a href="https://github.com/phanan/koel" target="_blank" rel="noopener">koel</a> - 基于网络的个人音频流媒体服务</li>
<li><a href="https://github.com/ycwalker/CMS-of-Blog" target="_blank" rel="noopener">CMS-of-Blog</a> - 博客内容管理器</li>
<li><a href="https://github.com/lzxb/vue-cnode" target="_blank" rel="noopener">vue-cnode</a> - 重写vue版cnode社区</li>
<li><a href="https://github.com/viko16/vue-ghpages-blog" target="_blank" rel="noopener">vue-ghpages-blog</a> - 依赖GitHub Pages无需本地生成的静态博客</li>
<li><a href="https://github.com/wh469012917/swoole-vue-webim" target="_blank" rel="noopener">swoole-vue-webim</a> - Web版的聊天应用</li>
<li><a href="https://github.com/sapjax/fewords" target="_blank" rel="noopener">fewords</a> - 功能极其简单的笔记本</li>
<li><a href="https://github.com/jackhutu/jackblog-vue" target="_blank" rel="noopener">jackblog-vue</a> - 个人博客系统</li>
<li><a href="https://github.com/surmon-china/vue-blog" target="_blank" rel="noopener">vue-blog</a> - 使用Vue2.0 和Vuex的vue-blog</li>
<li><a href="https://github.com/thelinuxlich/vue-dashing-js" target="_blank" rel="noopener">vue-dashing-js</a> - nuvo-dashing-js的fork</li>
<li><a href="https://github.com/mrgodhani/rss-reader" target="_blank" rel="noopener">rss-reader</a> - 简单的rss阅读器</li>
</ol>
<h2 id="十九、Demo示例"><a href="#十九、Demo示例" class="headerlink" title="十九、Demo示例"></a><strong>十九、Demo示例</strong></h2><ol>
<li><p><a href="https://github.com/liangxiaojuan/eleme" target="_blank" rel="noopener">eleme</a> - 高仿饿了么app商家详情</p>
</li>
<li><p><a href="https://github.com/javaSwing/NeteaseCloudWebApp" target="_blank" rel="noopener">NeteaseCloudWebApp</a> - 高仿网易云音乐的webapp</p>
</li>
<li><p><a href="https://github.com/hilongjw/vue-zhihu-daily" target="_blank" rel="noopener">vue-zhihu-daily</a> - 知乎日报 with Vuejs</p>
</li>
<li><p><a href="https://github.com/shinygang/Vue-cnodejs" target="_blank" rel="noopener">Vue-cnodejs</a> - 基于vue重写Cnodejs.org的webapp</p>
</li>
<li><p><a href="https://github.com/lzxb/vue2-demo" target="_blank" rel="noopener">vue2-demo</a> - 从零构建vue2 + vue-router + vuex 开发环境</p>
</li>
<li><p><a href="https://github.com/useryangtao/vue-wechat" target="_blank" rel="noopener">vue-wechat</a> - vue.js开发微信app界面</p>
</li>
<li><p><a href="https://github.com/Sioxas/vue-music" target="_blank" rel="noopener">vue-music</a> - Vue 音乐搜索播放</p>
</li>
<li><p><a href="https://github.com/zhengguorong/maizuo" target="_blank" rel="noopener">maizuo</a> - vue/vuex/redux仿卖座网</p>
</li>
<li><p><a href="https://github.com/kenberkeley/vue-demo" target="_blank" rel="noopener">vue-demo</a> - vue简易留言板</p>
</li>
<li><p><a href="https://github.com/codecasts/spa-starter-kit" target="_blank" rel="noopener">spa-starter-kit</a> - 单页应用启动套件</p>
</li>
<li><p><a href="https://github.com/yatessss/zhihudaily-vue" target="_blank" rel="noopener">zhihudaily-vue</a> - 知乎日报web版</p>
</li>
<li><p><a href="https://github.com/jiakeqi/douban" target="_blank" rel="noopener">douban</a> - 模仿豆瓣前端</p>
</li>
<li><p><a href="https://github.com/liangxiaojuan/vue-Meizi" target="_blank" rel="noopener">vue-Meizi</a> - vue最新实战项目</p>
</li>
<li><p><a href="https://github.com/lavyun/vue-demo-kugou" target="_blank" rel="noopener">vue-demo-kugou</a> - vuejs仿写酷狗音乐webapp</p>
</li>
<li><p><a href="https://github.com/canfoo/vue2.0-taopiaopiao" target="_blank" rel="noopener">vue2.0-taopiaopiao</a> - vue2.0与express构建淘票票页面</p>
</li>
<li><p><a href="https://github.com/yjj5855/node-vue-server-webpack" target="_blank" rel="noopener">node-vue-server-webpack</a> - Node.js+Vue.js+webpack快速开发框架</p>
</li>
<li><p><a href="https://github.com/SimonZhangITer/VueDemo_Sell_Eleme" target="_blank" rel="noopener">VueDemo_Sell_Eleme</a> - Vue2高仿饿了么外卖平台</p>
</li>
<li><p><a href="https://github.com/jiangjiu/vue-leancloud-blog" target="_blank" rel="noopener">vue-leancloud-blog</a> - 一个前后端完全分离的单页应用</p>
</li>
<li><p><a href="https://github.com/okoala/vue-fis3" target="_blank" rel="noopener">vue-fis3</a> - 流行开源工具集成demo</p>
</li>
<li><p><a href="https://github.com/wendaosanshou/mi-by-vue" target="_blank" rel="noopener">mi-by-vue</a> - VueJS仿小米官网</p>
</li>
<li><p><a href="https://github.com/ChuckCZC/vue-demo-maizuo" target="_blank" rel="noopener">vue-demo-maizuo</a> - 使用Vue2全家桶仿制卖座电影</p>
</li>
<li><p><a href="https://github.com/superman66/vue2.x-douban" target="_blank" rel="noopener">vue2.x-douban</a> - Vue2实现简易豆瓣电影webApp</p>
</li>
<li><p><a href="https://github.com/liujians/vue-adminLte-vue-router" target="_blank" rel="noopener">vue-adminLte-vue-router</a> - vue和adminLte整合应用</p>
</li>
<li><p><a href="https://github.com/iHaPBoy/vue-zhihudaily" target="_blank" rel="noopener">vue-zhihudaily</a> - 知乎日报 Web 版本</p>
</li>
<li><p><a href="https://github.com/pomelo-chuan/Zhihu-Daily-Vue.js" target="_blank" rel="noopener">Zhihu-Daily-Vue.js</a> - Vuejs单页网页应用</p>
</li>
<li><p><a href="https://github.com/superman66/vue-axios-github" target="_blank" rel="noopener">vue-axios-github</a> - 登录拦截登出功能</p>
</li>
<li><p><a href="https://github.com/vincentSea/vue2.x-Cnode" target="_blank" rel="noopener">vue2.x-Cnode</a> - 基于vue全家桶的Cnode社区</p>
</li>
<li><p><a href="https://github.com/rokups/hello-vue-django" target="_blank" rel="noopener">hello-vue-django</a> - 使用带有Django的vuejs的样板项目</p>
</li>
<li><p><a href="https://github.com/secreter/websocket_chat" target="_blank" rel="noopener">websocket_chat</a> - 基于vue和websocket的多人在线聊天室</p>
</li>
<li><p><a href="https://github.com/CommanderXL/x-blog" target="_blank" rel="noopener">x-blog</a> - 开源的个人blog项目</p>
</li>
<li><p><a href="https://github.com/wszgxa/vue-cnode" target="_blank" rel="noopener">vue-cnode</a> - vue单页应用demo</p>
</li>
<li><p><a href="https://github.com/xrr2016/vue-express-mongodb" target="_blank" rel="noopener">vue-express-mongodb</a> - 简单的前后端分离案例</p>
</li>
<li><p><a href="https://github.com/beidan/photoShare" target="_blank" rel="noopener">photoShare</a> - 基于图片分享的社交平台</p>
</li>
<li><p><a href="https://github.com/lin-xin/notepad" target="_blank" rel="noopener">notepad</a> - 本地存储的记事本</p>
</li>
<li><p><a href="https://github.com/cs1707/vue-zhihudaily-2.0" target="_blank" rel="noopener">vue-zhihudaily-2.0</a> - 使用Vue2.0+vue-router+vuex创建的zhihudaily</p>
</li>
<li><p><a href="https://github.com/elva2596/vueBlog" target="_blank" rel="noopener">vueBlog</a> - 前后端分离博客</p>
</li>
<li><p><a href="https://github.com/littlewin-wang/Zhihu_Daily" target="_blank" rel="noopener">Zhihu_Daily</a> - 基于Vue和Nodejs的Web单页应用</p>
</li>
<li><p><a href="https://github.com/hql123/vue-ruby-china" target="_blank" rel="noopener">vue-ruby-china</a> - VueJS框架搭建的rubychina平台</p>
</li>
<li><p><a href="https://github.com/Molunerfinn/vue-koa-demo" target="_blank" rel="noopener">vue-koa-demo</a> - 使用Vue2和Koa1的全栈demo</p>
</li>
<li><p><a href="https://github.com/shaqihe/life-app-vue" target="_blank" rel="noopener">life-app-vue</a> - 使用vue2完成多功能集合到小webapp</p>
</li>
<li><p><a href="https://github.com/wenye123/vue-trip" target="_blank" rel="noopener">vue-trip</a> - vue2做的出行webapp</p>
</li>
<li><p><a href="https://github.com/SidKwok/github-explorer" target="_blank" rel="noopener">github-explorer</a> - 寻找最有趣的GitHub库</p>
</li>
<li><p><a href="https://github.com/albertchan/vue-ssr-boilerplate" target="_blank" rel="noopener">vue-ssr-boilerplate</a> - 精简版的ofvue-hackernews-2</p>
</li>
<li><p><a href="https://github.com/nswbmw/vue-bushishiren" target="_blank" rel="noopener">vue-bushishiren</a> - 不是诗人应用</p>
</li>
<li><p><a href="https://github.com/peng1992/houtai" target="_blank" rel="noopener">houtai</a> - 基于vue和Element的后台管理系统</p>
</li>
<li><p><a href="https://github.com/QRL909109/ios7-vue" target="_blank" rel="noopener">ios7-vue</a> - 使用vue2.0 vue-router vuex模拟ios7</p>
</li>
<li><p><a href="https://github.com/tyllo/Framework7-VueJS" target="_blank" rel="noopener">Framework7-VueJS</a> - 使用移动框架的示例</p>
</li>
<li><p><a href="https://github.com/BubblyPoker/cnode-vue" target="_blank" rel="noopener">cnode-vue</a> - 基于vue和vue-router构建的cnodejs web网站SPA</p>
</li>
<li><p><a href="https://github.com/zhoou/vue-cli-multipage-bootstrap" target="_blank" rel="noopener">vue-cli-multipage-bootstrap</a> - 将vue官方在线示例整合到组件中</p>
</li>
<li><p><a href="https://github.com/jiananle/vue-cnode" target="_blank" rel="noopener">vue-cnode</a> - 用 Vue 做的 CNode 官网</p>
</li>
<li><p><a href="https://github.com/Alex-xd/seeMusic" target="_blank" rel="noopener">seeMusic</a> - 跨平台云音乐播放器</p>
</li>
<li><p><a href="https://github.com/GitaiQAQ/HyaReader" target="_blank" rel="noopener">HyaReader</a> - 移动友好的阅读器</p>
</li>
<li><p><a href="https://github.com/xrr2016/zhihu-daily" target="_blank" rel="noopener">zhihu-daily</a> - 轻松查看知乎日报内容</p>
</li>
<li><p><a href="https://github.com/Damonlw/vue-cnode" target="_blank" rel="noopener">vue-cnode</a> - 使用cNode社区提供的接口</p>
</li>
<li><p><a href="https://github.com/moonou/zhihu-daily-vue" target="_blank" rel="noopener">zhihu-daily-vue</a> - 知乎日报</p>
</li>
<li><p><a href="https://github.com/ITCNZ/vue-dropload" target="_blank" rel="noopener">vue-dropload</a> - 用以测试下拉加载与简单路由</p>
</li>
<li><p><a href="https://github.com/soulcm/vue-cnode-mobile" target="_blank" rel="noopener">vue-cnode-mobile</a> - 搭建cnode社区</p>
</li>
<li><p><a href="https://github.com/fishenal/Vuejs-SalePlatform" target="_blank" rel="noopener">Vuejs-SalePlatform</a> - vuejs搭建的售卖平台demo</p>
</li>
<li><p><a href="https://github.com/youknowznm/vue-memo" target="_blank" rel="noopener">vue-memo</a> - 用 vue写的记事本应用</p>
</li>
<li><p><a href="https://github.com/sailengsi/sls-vuex2-demo" target="_blank" rel="noopener">sls-vuex2-demo</a> - vuex2商城购物车demo</p>
</li>
<li><p><a href="https://github.com/Halfeld/v-notes" target="_blank" rel="noopener">v-notes</a> - 简单美观的记事本</p>
</li>
<li><p><a href="https://github.com/BosNaufal/vue-starter" target="_blank" rel="noopener">vue-starter</a> - VueJs项目的简单启动页</p>
<h3 id="二十、其他实用插件汇总"><a href="#二十、其他实用插件汇总" class="headerlink" title="二十、其他实用插件汇总"></a><strong>二十、其他实用插件汇总</strong></h3></li>
<li><p><a href="https://github.com/hilongjw/vue-dragging" target="_blank" rel="noopener">vue-dragging</a>- 使元素可以拖拽</p>
</li>
<li><p><a href="https://github.com/David-Desmaisons/Vue.Draggable" target="_blank" rel="noopener">Vue.Draggable</a>- 实现拖放和视图模型数组同步</p>
</li>
<li><p><a href="https://github.com/alessiomaffeis/vue-picture-input" target="_blank" rel="noopener">vue-picture-input</a>- 移动友好的图片文件输入组件</p>
</li>
<li><p><a href="https://github.com/ccforward/rubik" target="_blank" rel="noopener">rubik</a>- 基于Vuejs2的开源 UI 组件库</p>
</li>
<li><p><a href="https://github.com/OYsun/VueStar" target="_blank" rel="noopener">VueStar</a>- 带星星动画的vue点赞按钮</p>
</li>
<li><p><a href="https://github.com/matfish2/vue-tables-2" target="_blank" rel="noopener">vue-tables-2</a>- 显示数据的bootstrap样式网格</p>
</li>
<li><p><a href="https://github.com/SimonZhangITer/DataVisualization" target="_blank" rel="noopener">DataVisualization</a>- 数据可视化</p>
</li>
<li><p><a href="https://github.com/Alex-fun/vue-drag-and-drop-list" target="_blank" rel="noopener">vue-drag-and-drop-list</a>- 创建排序列表的Vue指令</p>
</li>
<li><p><a href="https://github.com/vuwe/vuwe" target="_blank" rel="noopener">vuwe</a>- 基于微信WeUI所开发的专用于Vue2的组件库</p>
</li>
<li><p><a href="https://github.com/cngu/vue-typer" target="_blank" rel="noopener">vue-typer</a>- 模拟用户输入选择和删除文本的Vue组件</p>
</li>
<li><p><a href="https://github.com/NewDadaFE/vue-impression" target="_blank" rel="noopener">vue-impression</a>- 移动Vuejs2 UI元素</p>
</li>
<li><p><a href="https://github.com/galenyuan/vue-datatable" target="_blank" rel="noopener">vue-datatable</a>- 使用Vuejs创建的DataTableView</p>
</li>
<li><p><a href="https://github.com/santiblanko/vue-instant" target="_blank" rel="noopener">vue-instant</a>- 轻松创建自动提示的自定义搜索控件</p>
</li>
<li><p><a href="https://github.com/NightCatSama/vue-slider-component" target="_blank" rel="noopener">vue-slider-component</a>- 在vue1和vue2中使用滑块</p>
</li>
<li><p><a href="https://github.com/surmon-china/vue-touch-ripple" target="_blank" rel="noopener">vue-touch-ripple</a>- vuejs的触摸ripple组件</p>
</li>
<li><p><a href="https://github.com/Kocisov/coffeebreak" target="_blank" rel="noopener">coffeebreak</a>- 实时编辑CSS组件工具</p>
</li>
<li><p><a href="https://github.com/coderdiaz/vue-datasource" target="_blank" rel="noopener">vue-datasource</a>- 创建VueJS动态表格</p>
</li>
<li><p><a href="https://github.com/vue-bulma/handsontable" target="_blank" rel="noopener">handsontable</a>- 网页表格组件</p>
</li>
<li><p><a href="https://github.com/jbaysolutions/vue-bootstrap-table" target="_blank" rel="noopener">vue-bootstrap-table</a>- 可排序可检索的表格</p>
</li>
<li><p><a href="https://github.com/phanan/vue-google-signin-button" target="_blank" rel="noopener">vue-google-signin-button</a>- 导入谷歌登录按钮</p>
</li>
<li><p><a href="https://github.com/bkzl/vue-float-label" target="_blank" rel="noopener">vue-float-label</a>- VueJS浮动标签模式</p>
</li>
<li><p><a href="https://github.com/Ginhing/vue-tagsinput" target="_blank" rel="noopener">vue-tagsinput</a>- 基于VueJS的标签组件</p>
</li>
<li><p><a href="https://github.com/nicolasbeauvais/vue-social-sharing" target="_blank" rel="noopener">vue-social-sharing</a>- 社交分享组件</p>
</li>
<li><p><a href="https://github.com/myronliu347/vue-popup-mixin" target="_blank" rel="noopener">vue-popup-mixin</a>- 用于管理弹出框的遮盖层</p>
</li>
<li><p><a href="https://github.com/fangyongbao/cubeex" target="_blank" rel="noopener">cubeex</a>- 包含一套完整的移动UI</p>
</li>
<li><p><a href="https://github.com/CroudSupport/vue-fullcalendar" target="_blank" rel="noopener">vue-fullcalendar</a>- vue FullCalendar封装</p>
</li>
<li><p><a href="https://github.com/loujiayu/vue-material-design" target="_blank" rel="noopener">vue-material-design</a>- Vue MD风格组件</p>
</li>
<li><p><a href="https://github.com/bbonnin/vue-morris" target="_blank" rel="noopener">vue-morris</a>- Vuejs组件封装Morrisjs库</p>
</li>
<li><p><a href="https://github.com/tianyong90/we-vue" target="_blank" rel="noopener">we-vue</a>- Vue2及weui1开发的组件</p>
</li>
<li><p><a href="https://github.com/matfish2/vue-form-2" target="_blank" rel="noopener">vue-form-2</a>- 全面的HTML表单管理的解决方案</p>
</li>
<li><p><a href="https://github.com/vue-comps/vue-side-nav" target="_blank" rel="noopener">vue-side-nav</a>- 响应式的侧边导航</p>
</li>
<li><p><a href="https://github.com/mint-ui/mint-indicator" target="_blank" rel="noopener">mint-indicator</a>- VueJS移动加载指示器插件</p>
</li>
<li><p><a href="https://github.com/BosNaufal/vue-ripple" target="_blank" rel="noopener">vue-ripple</a>- 制作谷歌MD风格涟漪效果的Vue组件</p>
</li>
<li><p><a href="https://github.com/icebob/vue-touch-keyboard" target="_blank" rel="noopener">vue-touch-keyboard</a>- VueJS虚拟键盘组件</p>
</li>
<li><p><a href="https://github.com/vue-comps/vue-parallax" target="_blank" rel="noopener">vue-parallax</a>- 整洁的视觉效果</p>
</li>
<li><p><a href="https://github.com/eduardostuart/vue-typewriter" target="_blank" rel="noopener">vue-typewriter</a>- vue组件类型</p>
</li>
<li><p><a href="https://github.com/Treri/vue-ios-alertview" target="_blank" rel="noopener">vue-ios-alertview</a>- iOS7+ 风格的alertview服务</p>
</li>
<li><p><a href="https://github.com/yeseason/paco-ui-vue" target="_blank" rel="noopener">paco-ui-vue</a>- PACOUI的vue组件</p>
</li>
<li><p><a href="https://github.com/steven5538/vue-button" target="_blank" rel="noopener">vue-button</a>- Vue按钮组件</p>
</li>
<li>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/vue%E5%BC%80%E5%8F%91%E7%BB%84%E4%BB%B6%E5%BA%93/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E6%A1%88%E4%BE%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E6%A1%88%E4%BE%8B/" class="post-title-link" itemprop="url">前端/Vue+React+Angular/Vue/Vue案例</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:43:39" itemprop="dateModified" datetime="2020-06-26T15:43:39+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>55</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="Vue案例"><a href="#Vue案例" class="headerlink" title="Vue案例"></a>Vue案例</h1><h2 id="品牌案例"><a href="#品牌案例" class="headerlink" title="品牌案例"></a>品牌案例</h2><h3 id="从数据库获取列表"><a href="#从数据库获取列表" class="headerlink" title="从数据库获取列表"></a>从数据库获取列表</h3><h3 id="全局配置数据接口的根"><a href="#全局配置数据接口的根" class="headerlink" title="全局配置数据接口的根"></a>全局配置数据接口的根</h3><h3 id="完成添加功能"><a href="#完成添加功能" class="headerlink" title="完成添加功能"></a>完成添加功能</h3><h3 id="全局配置emulateJSON选"><a href="#全局配置emulateJSON选" class="headerlink" title="全局配置emulateJSON选"></a>全局配置emulateJSON选</h3><h3 id="完成删除功能"><a href="#完成删除功能" class="headerlink" title="完成删除功能"></a>完成删除功能</h3>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/Vue+React+Angular/Vue/Vue%E6%A1%88%E4%BE%8B/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/" class="post-title-link" itemprop="url">前端/UI/UI框架</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 14:02:10" itemprop="dateModified" datetime="2020-06-26T14:02:10+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>10k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>9 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>#UI框架 动效 学习</p>
<p>二〇二〇年五月三十一日</p>
<p><img src="https://i.loli.net/2020/05/30/gxfwrANW62sQa5l.jpg" alt="1 (C:%5CUsers%5CAdministrator%5CPictures%5C%E5%A3%81%E7%BA%B8%5C1%20(6).jpg)"></p>
<p>2019最受欢迎的前端7个UI框架 - 知乎<br><a href="https://zhuanlan.zhihu.com/p/61403630" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/61403630</a></p>
<p>2019年最流行的10个前端框架，设计师快来收藏！ | 优设网 - UISDC<br><a href="https://www.uisdc.com/2019-10-front-frame" target="_blank" rel="noopener">https://www.uisdc.com/2019-10-front-frame</a></p>
<p><a href="https://juejin.im/post/5cc089eae51d456e7d189f9d#heading-32" target="_blank" rel="noopener">前端动效库汇总</a></p>
<h2 id="CSS-动画的基础知识-transition-transform-animation"><a href="#CSS-动画的基础知识-transition-transform-animation" class="headerlink" title="CSS 动画的基础知识  transition + transform + animation"></a>CSS 动画的基础知识  transition + transform + animation</h2><p><a href="https://juejin.im/post/5a424a796fb9a045023be66c" target="_blank" rel="noopener">CSS3的动画属性 - 掘金</a></p>
<p><a href="https://aotu.io/notes/2016/05/06/CSS3-3D-Animation/" target="_blank" rel="noopener">CSS3动画之3D动画 | Aotu.io「凹凸实验室」</a></p>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/UI/UI%E6%A1%86%E6%9E%B6/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/element/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/element/" class="post-title-link" itemprop="url">element</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 14:02:10" itemprop="dateModified" datetime="2020-06-26T14:02:10+08:00">2020-06-26</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E8%AF%AD%E6%B3%95%E9%94%99%E8%AF%AF%E7%AF%87/" itemprop="url" rel="index"><span itemprop="name">语法错误篇</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>20</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>ul&gt;li*10{这是第$个li}</p>

          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/element/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/25/%E5%89%8D%E7%AB%AF/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%A1%88%E4%BE%8B/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/25/%E5%89%8D%E7%AB%AF/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%A1%88%E4%BE%8B/" class="post-title-link" itemprop="url">前端/JavaScript/正则表达式案例</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-25 12:56:44" itemprop="dateCreated datePublished" datetime="2020-06-25T12:56:44+08:00">2020-06-25</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:43:39" itemprop="dateModified" datetime="2020-06-26T15:43:39+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>142</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>正则表达式</p>
<p><a href="https://juejin.im/post/5eb8ad655188256d3c52de29" target="_blank" rel="noopener">前端进阶高薪必看-正则篇 - 掘金</a></p>
<p>写用户注册表单时，只允许用户名包含字符、数字、下划线和连接字符(-)，并设置用户名的长度，我们就可以使用以下正则表达式来设定</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">^[a-z0-9_-]&#123;3,15&#125;$</span><br></pre></td></tr></table></figure>







<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">^[0-9]+abc$ 匹配以数字开头，并以 abc 结尾的字符串</span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/25/%E5%89%8D%E7%AB%AF/JavaScript/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%A1%88%E4%BE%8B/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/24/%E8%BD%AF%E4%BB%B6/Navicat%E8%BD%AF%E4%BB%B6%E7%9A%84%E5%AD%A6%E4%B9%A0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/24/%E8%BD%AF%E4%BB%B6/Navicat%E8%BD%AF%E4%BB%B6%E7%9A%84%E5%AD%A6%E4%B9%A0/" class="post-title-link" itemprop="url">软件/Navicat软件的学习</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-24 12:26:05" itemprop="dateCreated datePublished" datetime="2020-06-24T12:26:05+08:00">2020-06-24</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-26 15:43:39" itemprop="dateModified" datetime="2020-06-26T15:43:39+08:00">2020-06-26</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>0</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/24/%E8%BD%AF%E4%BB%B6/Navicat%E8%BD%AF%E4%BB%B6%E7%9A%84%E5%AD%A6%E4%B9%A0/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/22/%E6%97%A5%E5%B8%B8%E7%94%9F%E6%B4%BB/%E8%B7%AF%E7%94%B1%E5%99%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/22/%E6%97%A5%E5%B8%B8%E7%94%9F%E6%B4%BB/%E8%B7%AF%E7%94%B1%E5%99%A8/" class="post-title-link" itemprop="url">日常生活/路由器</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-22 20:08:02" itemprop="dateCreated datePublished" datetime="2020-06-22T20:08:02+08:00">2020-06-22</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-07-08 23:49:10" itemprop="dateModified" datetime="2020-07-08T23:49:10+08:00">2020-07-08</time>
              </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>118</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>1 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>斐讯路由器：K2 PSG1218 A2</p>
<p>固件版本：22.6.507.43</p>
<p><a href="https://blog.csdn.net/bingyu880101/article/details/82915433" target="_blank" rel="noopener">(29条消息)[2018-10-1]斐讯K2 PSG1218 A2 刷bread 和第三方老毛子Padavan固件_SevenFighting的专栏-CSDN博客_psg1218</a></p>

          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/22/%E6%97%A5%E5%B8%B8%E7%94%9F%E6%B4%BB/%E8%B7%AF%E7%94%B1%E5%99%A8/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/06/19/%E9%9D%99%E6%80%81blog/Hexo/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/2020/06/19/%E9%9D%99%E6%80%81blog/Hexo/" class="post-title-link" itemprop="url">Hexo学习</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-06-19 01:52:17" itemprop="dateCreated datePublished" datetime="2020-06-19T01:52:17+08:00">2020-06-19</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-30 18:24:24" itemprop="dateModified" datetime="2020-06-30T18:24:24+08:00">2020-06-30</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%8D%9A%E5%AE%A2/" itemprop="url" rel="index"><span itemprop="name">博客</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>6.3k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>6 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="第零篇、静态blog-生成页面"><a href="#第零篇、静态blog-生成页面" class="headerlink" title="第零篇、静态blog 生成页面"></a>第零篇、静态blog 生成页面</h1><blockquote>
<p>hexo、wordpress、hugo、jekyll</p>
<p>Jekyll、Hugo、Hexo 是简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll、Hugo、Hexo 也可以运行在 码云（Gitee.com） Pages 上，也就是说，你可以使用码云的服务来搭建你的仓库页面、博客或者网站，而且是完全免费的。</p>
</blockquote>
<h1 id="第一篇、Hexo-博客框架"><a href="#第一篇、Hexo-博客框架" class="headerlink" title="第一篇、Hexo 博客框架"></a>第一篇、Hexo 博客框架</h1><p><a href="https://www.jianshu.com/p/9f794db64f42" target="_blank" rel="noopener">Hexo的主题更换与使用教程 - 简书</a></p>
<p><a href="https://blog.csdn.net/tangcuyuha/article/details/80331169" target="_blank" rel="noopener">(30条消息)让hexo一直在后台运行_TangCuYu的博客-CSDN博客_hexo 后台运行</a></p>
<p>Jekyll 使用文档：<a href="https://www.jekyll.com.cn/docs/home/" target="_blank" rel="noopener">https://www.jekyll.com.cn/docs/home/</a><br>Hugo 使用文档：<a href="https://gohugo.io/documentation/" target="_blank" rel="noopener">https://gohugo.io/documentation/</a><br>Hexo 使用文档：<a href="https://hexo.io/docs/" target="_blank" rel="noopener">https://hexo.io/docs/</a></p>
<h2 id="Hexo学习"><a href="#Hexo学习" class="headerlink" title="Hexo学习"></a>Hexo学习</h2><p>官网：</p>
<h3 id="hexo基础知识"><a href="#hexo基础知识" class="headerlink" title="hexo基础知识"></a>hexo基础知识</h3>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/06/19/%E9%9D%99%E6%80%81blog/Hexo/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  


  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/2/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/page/10/">10</a><a class="extend next" rel="next" href="/page/4/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  


<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
